<template>
	<view>
		<view class="nav-bar" :style="{ height: navBarHeight }">
			<view class="content-box">
				<view class="left-icon" @click="clickBack">
					<uni-icons type="left" color="#FFF" size="30"></uni-icons>
				</view>
				<!-- <view class="search-form">
					<u-search v-model="searchValue" shape="round" :showAction="false" placeholder="搜本店"
						bgColor="#FFF" @search="search" @clear="clear"></u-search>
				</view> -->
			</view>
		</view>
		<!-- <view class="sift-box">
			<view class="sift-item" v-for="(item, index) in siftConfig" :key="index" @click="changeTab" :data-item="item">
				<view class="name">{{ item.name }}</view>
				<view class="sift-icon">
					<image class="icon-img" :src="baseIconUrl + item.icon" mode="aspectFill" />
				</view>
			</view>
		</view> -->
		<scroll-view :style="{ height: scrollHeight }" class="goods-list">
			<goods-list :goodsList="goodsList" @clickGoodsItem="clickGoodsItem"></goods-list>
		</scroll-view>
		<view style="width: 100vw;height: 100upx;line-height: 100upx;margin-top: 100upx;" v-if="goodsList.length == 0">
			<view class="row-center">
				<p>------</p>
				<p style="margin: 0 30upx;">暂无数据</p>
				<p>------</p>
			</view>
		</view>
		<!-- <view class="bottom-box">
			<view class="car-box" @click="clickCar">
				<image class="car-icon" :src="baseIconUrl + 'icon_car.png'" mode="aspectFill" />购物车
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		baseUrl,
		baseImgUrl,
		baseIconUrl
	} from '@/config'
	import GoodsList from '../components/goodsList'
	export default {
		name: 'StoreSearch',
		components: {
			GoodsList
		},
		data() {
			return {
				baseUrl,
				baseImgUrl,
				baseIconUrl,
				navBarHeight: '',
				safeHeight: '',
				scrollHeight: '',
				searchValue: '',
				storeId: '',
				id: '',
				sortType: 1,
				sort: 1,
				goodsList: [],
				goodsNum: 1.,
				userInfo: {}
			}
		},
		onLoad(options) {
			this.navBarHeight = this.$store.getters.heightData.navBarHeight + 'px'
			this.safeHeight = this.$store.getters.heightData.safeHeight
			this.storeId = options.storeId
			this.id = options.id
			// this.getGoodsList()
			this.handleProducts(options.id)
		},
		methods: {
			//跳转商品详情
			clickGoodsItem(item) {
				console.log(item)
				uni.navigateTo({ url: `/subPages/store/goodsDetail?id=${item.storeGoodId}&storeId=${this.storeId}` })
			},
			//根据分类id查询商品
			async handleProducts(id) {
				const data = {
					classThreeId: id,
					storeId: this.storeId
				}
				const res = await this.$GET('/fx/supplier/good/listByClassify', data)
				console.log('分类下商品列表--->', res)
				if (res.code == 200) {
					this.goodsList = res.rows
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg || '获取商品列表失败',
						duration: 2000
					})
				}
			},
			clickBack() {
				uni.navigateBack()
			},
			changeTab(e) {
				console.log(e)
				if (e.currentTarget.dataset.item.sortType) {
					this.sortType = e.currentTarget.dataset.item.sortType
				} else {
					this.sortType = e.currentTarget.dataset.item.sortType
				}
				this.getGoodsList()
			},
			async clear() {
				this.getGoodsList()
			},
			async search() {
				this.getGoodsList()
			},
			async getGoodsList() {
				const data = {
					goodName: this.searchValue,
					storeId: this.storeId,
					sortType: this.sortType,
					sort: this.sort
				}
				const res = await this.$GET('/fx/store/good/searchGood', data)
				console.log('查本店商品-->',res)
				if (res.code == 200) {
					this.goodsList = res.data
				}
			},
			clickCar() {
				uni.navigateTo({
					url: `/subPages/store/shoppingCart`
				})
			},
			clickSettle() {
				uni.navigateTo({
					url: `/subPages/store/confirmOrder`
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.nav-bar {
		display: flex;
		align-items: flex-end;
		background-color: #0b3f35;

		.content-box {
			display: flex;
			height: 88rpx;

			.left-icon {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 48rpx;
				height: 48rpx;
				margin: 24rpx 20rpx 0 4rpx;
			}

			.search-form {
				margin-top: 12rpx;
			}
		}
	}

	.sift-box {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #FFF;

		.sift-item {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			font-size: 28rpx;
		}

		.sift-icon {
			width: 40rpx;
			height: 40rpx;
		}

		.icon-img {
			width: 100%;
			height: 100%;
		}
	}

	.goods-list {
		padding: 20rpx 28rpx 0;
	}

	.bottom-box {
		position: fixed;
		bottom: 0;
		display: flex;
		padding: 10rpx 28rpx 0;
		align-items: center;
		width: 100%;
		border-top: 2rpx solid rgba(0, 0, 0, .1);
		background-color: #FFF;

		.car-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 20rpx;
			color: #808080;

			.car-icon {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 4rpx;
			}
		}

		.text-box {
			flex: 1;
			margin-left: 46rpx;
			font-size: 24rpx;

			.account-icon {
				margin-left: 8rpx;
				color: #EB2727;
			}

			.account {
				color: #EB2727;
				font-size: 26rpx;
			}
		}

		.btn-box {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 180rpx;
			height: 80rpx;
			border-radius: 40rpx;
			font-size: 30rpx;
			color: #FFF;
			background-color: #0b3f35;
		}
	}
</style>